<script setup>
import { ref, reactive, onMounted } from "vue"
import Audit from "./Audit/index.vue"
import Pay from "./Pay/index.vue"
import Settlement from "./Settlement/index.vue"
const tlWrap = ref()
const height = ref(0)
const params = reactive({
  business: "",
  month: ''
})
const visiableAudit = ref(false)
const visiablePay = ref(false)
const visiableSettlement = ref(false)
const businessOptions = ref([
  {
    id: 1,
    businessName: '果塘湖农贸市场',
    cargoNum: 3,
    saled: '500',
    saledMoney: '4000',
    loginName: "15823101358",
    taken: "2000",
    state: "0",
    address: "重庆市渝北区果塘路9号", // 地址
    bank: '重庆农商行', // 开户银行
    bankAccount: '8757757878789', //银行账户
    bankAccountName: "姚志农", // 银行户名
    descript: "", //描述
  },
  {
    id: 2,
    businessName: '渝佰滋味',
    cargoNum: 3,
    saled: '500',
    saledMoney: '4000',
    loginName: "89132911",
    taken: "2000",
    state: "1",
    address: "重庆市江北区石马河街道玉带山200号", // 地址
    bank: '农业银行', // 开户银行
    bankAccount: '453545467675777575', //银行账户
    bankAccountName: "沈渝", // 银行户名
    descript: "", //描述
  },
  {
    id: 3,
    businessName: '鲜丰水果',
    cargoNum: 3,
    saled: '500',
    saledMoney: '4000',
    loginName: "19936307460",
    taken: "2000",
    state: "0",
    address: "重庆市沙坪坝区虎溪街道大学城西路29号附16号", // 地址
    bank: '工商银行', // 开户银行
    bankAccount: '3039820928920920', //银行账户
    bankAccountName: "张鲜丰", // 银行户名
    descript: "", //描述
  }
])
const stateOptions = ref([
  {
    value: '0',
    label: '待审核'
  },
  {
    value: '1',
    label: '待支付'
  },
  {
    value: '2',
    label: '已拒绝'
  },
  {
    value: '3',
    label: '已支付'
  }
])
const tableData = ref([
  {
    id: 1,
    businessName: '果塘湖农贸市场',
    createDate: '2024-08-06 21:13:13',
    yearMonth: '2024-08',
    tradeMoney: '4000',
    tradeYuan: '200',
    state: '0',
    reason: ''
  },
  {
    id: 2,
    businessName: '鲜丰水果',
    createDate: '2024-08-06 21:13:13',
    yearMonth: '2024-08',
    tradeMoney: '4000',
    tradeYuan: '200',
    state: '1',
    reason: ''
  },
  {
    id: 3,
    businessName: '渝佰滋味',
    createDate: '2024-08-06 21:13:13',
    yearMonth: '2024-08',
    tradeMoney: '4000',
    tradeYuan: '200',
    state: '2',
    reason: '已拒绝需要理由'
  },
  {
    id: 4,
    businessName: '鲜丰水果',
    createDate: '2024-08-06 21:13:13',
    yearMonth: '2024-08',
    tradeMoney: '4000',
    tradeYuan: '200',
    state: '3',
    reason: ''
  },
])
onMounted(() => {
  height.value = tlWrap.value.offsetHeight - 35 - 52 - 20
})

const gotoAudit = () => {
  visiableAudit.value = true
}

const gotoSettlement = () => {
  visiableSettlement.value = true
}

const gotoPay = () => {
  visiablePay.value = true
}
</script>

<template>
  <div class="tl-wrap" ref="tlWrap">
    <div class="static">
      <el-descriptions column="6" border>
        <el-descriptions-item align="center" label="本月可结算额">
          <template #label>
            <div class="cell-item">
              <img src="../../assets/zhuzhuang1.png" alt="" style="height: 15px;margin-right: 5px;">
              本月可结算额
            </div>
          </template>
          268500
        </el-descriptions-item>
        <el-descriptions-item align="center" label="本月交易总额">
          <template #label>
            <div class="cell-item">
              <img src="../../assets/zhuzhuang1.png" alt="" style="height: 15px;margin-right: 5px;">
              本月交易总额
            </div>
          </template>
          268500
        </el-descriptions-item>
        <el-descriptions-item align="center" label="本月已结算额">
          <template #label>
            <div class="cell-item">
              <img src="../../assets/zhuzhuang3.png" alt="" style="height: 15px;margin-right: 5px;">
              本月已结算额
            </div>
          </template>
          268500
        </el-descriptions-item>
        <el-descriptions-item align="center" label="本年交易总额">
          <template #label>
            <div class="cell-item">
              <img src="../../assets/zhuzhuang3.png" alt="" style="height: 15px;margin-right: 5px;">
              本年交易总额
            </div>
          </template>
          268500
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="search">
      <el-button @click="gotoSettlement" style="margin-right: 10px">申请结算</el-button>
      <el-select v-model="params.business" placeholder="请选择商家" style="width: 180px;margin-right: 10px">
        <el-option v-for="item in businessOptions" :key="item.id" :label="item.businessName" :value="item.businessName" />
      </el-select>
      <el-date-picker v-model="value1" style="margin-right: 10px" type="monthrange" range-separator="至"
        start-placeholder="开始" end-placeholder="结束" />
      <el-button type="primary">查询</el-button>
    </div>
    <div class="table">
      <el-table :data="tableData" border style="width: 100%" :height="height">
        <el-table-column prop="businessName" label="商家名称" width="180" />
        <el-table-column prop="createDate" label="创建时间" width="180" />
        <el-table-column prop="yearMonth" label="年月" width="100" />
        <el-table-column prop="tradeMoney" label="结算金额(金额)" width="140" />
        <el-table-column prop="tradeYuan" label="结算金额(人民币)" width="140" />
        <el-table-column prop="state" label="状态" width="80">
          <template #default="scope">
            {{ stateOptions.find(so => so.value === scope.row.state).label }}
          </template>
        </el-table-column>
        <el-table-column prop="reason" label="理由" />
        <el-table-column fixed="right" label="操作" min-width="120">
          <template #default="scope">
            <el-button v-if="scope.row.state === '0'" link type="primary" @click="gotoAudit">
              审核
            </el-button>
            <el-button v-if="scope.row.state === '1'" link type="primary" @click="gotoPay">支付</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <Audit :visiable="visiableAudit" @close="visiableAudit = false" />
  <Pay :visiable="visiablePay" @close="visiablePay = false" />
  <Settlement :visiable="visiableSettlement" @close="visiableSettlement = false" />
</template>

<style scoped>
.tl-wrap {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #fff;
  overflow: auto;
}

.static {
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
}

.el-col {
  text-align: center;
}

.search {
  padding: 10px;
}

.table {
  margin: 0 10px;
}

.cell-item {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>